<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <!-- <img src="./img/logo.png" alt=""> -->
      <div class="ti">
        <img src="./images/logo.png" alt="">
        <img class="title" src="./images/title.png" alt="">
      </div>
    </div>
    <!-- 版心 -->
    <div class="main">
      <!-- 导航 -->
      <div class="nav">
        <!-- 左侧 -->
        <div class="nav-left">
          <ul>
            <li><a href="#"><img src="./images/2 2x.png" alt=""> APP下载</a></li>
            <li><a href="#"><img src="./images/3 2x.png" alt=""> 系统管理</a></li>
          </ul>
        </div>
        <!-- 右侧 -->
        <div class="nav-right">
          <div class="abc">
            <ul>
              <li>
                <img src="./images/4 2x.png" alt="">
              </li>
              <li>
                <img src="./images/5 2x.png" alt="">
              </li>
            </ul>
            <div class="nav-txt">蓝色理想</div>
            <div class="portrait" />
          </div>
        </div>
      </div>
      <!-- 展示区域 -->
      <div class="banner">
        <div class="banner-left">
          <div class="banner-left-top">
            <div class="top">
              <img src="./images/1 2x.png" alt="">
              武汉梦时代
              <span @click="$router.push('/')">更多</span>
            </div>
            <div class="bottom">
              <div id="bottom-left" />
              <div id="bottom-right" />
            </div>
          </div>
          <div class="banner-left-center">
            <div class="top">
              <img src="./images/6 2x.png" alt="">
              园区运营管理
            </div>
            <div class="bottom">
              <div class="ce">
                <div><img src="./images/13 2x.png" alt=""></div>
                态势检测系统
              </div>
              <div class="ce">
                <div><img src="./images/14 2x.png" alt=""></div>
                态势检测系统
              </div>
              <div class="ce">
                <div><img src="./images/11 2x.png" alt=""></div>
                态势检测系统
              </div>
              <div class="ce">
                <div><img src="./images/12 2x.png" alt=""></div>
                态势检测系统
              </div>
            </div>
          </div>
          <!-- <div class="banner-left-footer">下</div> -->
        </div>
        <div class="banner-center">
          <div class="top">
            <img class="img" src="./img/more.png" alt="">
            <ul>
              <li>
                <div><span>80</span></div>
                <span>生命线指数</span>
              </li>
              <li>
                <div><span>67</span></div>
                <span>安全指数</span>
              </li>
              <li id="li">
                <div><span>90</span></div>
                <span class="li-s">综合指数</span>
              </li>
              <li>
                <div><span>45</span></div>
                <span>通行指数</span>
              </li>
              <li>
                <div><span>78</span></div>
                <span>生态环境指数</span>
              </li>
            </ul>
          </div>
          <img src="./img/banner.jpg" alt="">
        </div>
        <div class="banner-right">
          <div class="banner-right-top">
            <div class="top">
              <img src="./images/8 2x.png" alt="">
              通知公告
            </div>
            <div class="bottom">
              <ul>
                <li>
                  <img src="./images/10 2x.png" alt="">
                  消防演练通知-全员<span>2022-01-11</span>
                </li>
                <li>
                  <img src="./images/10 2x.png" alt="">
                  消防演练通知-全员<span>2022-01-11</span>
                </li>
                <li>
                  <img src="./images/10 2x.png" alt="">
                  消防演练通知-全员<span>2022-01-11</span>
                </li>
                <li>
                  <img src="./images/10 2x.png" alt="">
                  消防演练通知-全员<span>2022-01-11</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="banner-right-footer">
            <div class="top">
              <img src="./images/9 2x.png" alt="">
              待办任务(10)
              <span>更多</span>
            </div>
            <div class="bottom">
              <ul>
                <li>
                  <img src="./images/zhihui.png" alt="">
                  <span class="text">您有一个新的审批需要...</span>
                  <span class="time">2021-08-15</span>
                </li>
                <li>
                  <img src="./images/zhihui.png" alt="">
                  <span class="text">您有一个新的审批需要...</span>
                  <span class="time">2021-08-15</span>
                </li>
                <li>
                  <img src="./images/zhihui.png" alt="">
                  <span class="text">您有一个新的审批需要...</span>
                  <span class="time">2021-08-15</span>
                </li>
                <li>
                  <img src="./images/zhihui.png" alt="">
                  <span class="text">您有一个新的审批需要...</span>
                  <span class="time">2021-08-15</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="content">
        <div class="content-top">
          <img src="./images/7 2x.png" alt="">
          智慧园区应用
        </div>
        <div class="content-bottom">
          <ul class="one">
            <li @click="$router.push('/cenMonitor/videoSurveil')">
              <img src="./images/video@2x.png" alt="">
              <span>视频监控系统</span>
            </li>
            <li @click="$router.push('/cenMonitor/accessControl')">
              <img src="./images/door 2x.png" alt="">
              <span>门禁监控系统</span>
            </li>
            <li @click="$router.push('/cenMonitor/siren')">
              <img src="./images/urgency 2x.png" alt="">
              <span>紧急报警系统</span>
            </li>
            <li @click="$router.push('/cenMonitor/architecture')">
              <img src="./images/ele 2x.png" alt="">
              <div>
                <p>建筑机电设备</p>
                <p>智能管理系统</p>
              </div>
            </li>
            <li @click="$router.push('/cenMonitor/energy')">
              <img src="./images/energy 2x.png" alt="">
              <div>
                <p>建筑能效监管</p>
                <p>子系统</p>
              </div>
            </li>
            <li @click="$router.push('/cenMonitor/parking')">
              <img src="./images/parking 2x.png" alt="">
              <div>
                <p>停车场智能管理</p>
                <p>子系统</p>
              </div>
            </li>
            <li @click="$router.push('/cenMonitor/fire')">
              <img src="./images/fire 2x.png" alt="">
              <span>火灾报警子系统</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
        <span>Copyright 梦时代服务中心</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.meter()
    this.Radar()
  },
  methods: {
    // 仪表盘
    meter() {
      const myEchart = this.$echarts.init(document.getElementById('bottom-left'))
      const option = {
        series: [
          {
            type: 'gauge',
            radius: 60,
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              show: false,
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              // distance: -30,
              // length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 40,
              fontSize: 0
            },
            detail: {
              valueAnimation: true,
              formatter: '园区活力',
              color: 'auto',
              offsetCenter: [0, '10%'],
              fontSize: 14
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      }
      myEchart.setOption(option)
    },
    // 雷达图
    Radar() {
      const myRadar = this.$echarts.init(document.getElementById('bottom-right'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        radar: [
          {
            name: { show: true, textStyle: { fontSize: 12, color: 'rgb(104,131,165)' } },
            indicator: [
              { text: '安全', max: 100 },
              { text: '通行', max: 100 },
              { text: '生态环境', max: 100 },
              { text: '绿色能源', max: 100 },
              { text: '生命线', max: 100 }
              // { text: '思维模式', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: 45 // 半径，可放大放小雷达图
          }
        ],
        series: [
          {
            name: '',
            type: 'radar', // 图表类型 radar为雷达图
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#87cefa',
                  width: 2
                },
                areaStyle: {
                  color: '#87cefa',
                  type: 'default'
                }
              }
            },
            symbolSize: 6,
            data: [{
              value: [100, 80, 80, 80, 80, 80]
            }]
          }
        ]
      }
      myRadar.setOption(option)
    },
    // 退出登录
    logout() {
      console.log(111)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  background-color: #ececf1;
  .header {
    height: 80px;
    // background-color: rgb(247, 216, 222);
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    position: relative;

    .ti {
      width: 400px;
      height: 100%;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
      }
      .title {
        width: 30%;
        position: absolute;
        top: 25px;
        left: 35%;
      }
    }
  }
  .main {
    width: 1600px;
    // height: 2000px;
    // background-color: skyblue;
    margin: 0 auto;
    // 导航
    .nav {
      width: 100%;
      height: 40px;
      // background-color: skyblue;
      position: relative;
      top: -20px;
      .nav-left {
        width: 33%;
        height: 100%;
        // background-color: pink;
        float: left;
        ul {
          li {
            float: left;
            font-size: 15px;
            line-height: 50px;
          }
          li:not(:nth-child(1)) {
            margin-left: 30px;
          }
        }
        img {
          width: 15px;
          margin-right: 3px;
          vertical-align: middle;
        }
      }
      .nav-right {
        width: 30%;
        height: 100%;
        // background-color: pink;
        float: right;
        position: relative;
        .abc {
          width: 100%;
          height: 30px;
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          bottom: 0;
          margin-top: -15px;
          // background-color: aqua;
        }
        .nav-txt {
          width: 50px;
          float: right;
          color: #45454d;
          font-size: 12px;
          margin-right: 27px;
          padding-top: 12px;
        }
        .portrait {
          width: 30px;
          height: 30px;
          background-color: rgb(248, 215, 171);
          border-radius: 50%;
          float: right;
          margin-right: 10px;
        }
        ul {
          float: right;
          position: relative;
          z-index: 100;
          li {
            // margin-right: 30px;
            float: left;
            line-height: 30px;
            &:hover {
              cursor: pointer;
            }
            img {
              width: 15px;
              height: 15px;
            }
          }
          li:not(:nth-child(2)) {
            margin-right: 20px;
          }
        }
      }
    }

    // 展示
    .banner {
      width: 100%;
      height: 500px;
      // background-color: yellow;
      .banner-left {
        width: 29%;
        height: 100%;
        // background-color: red;
        margin-right: 1%;
        float: left;
        border-radius: 5px;
        .banner-left-top {
          width: 100%;
          height: 245px;
          background-color: #fff;
          margin-bottom: 10px;
          border-radius: 5px;
          padding: 10px;
          .top {
            width: 100%;
            height: 30px;
            line-height: 30px;
            img {
              height: 100%;
            }
            span {
              color: rgb(104, 131, 165);
              float: right;
            }
          }
          .bottom {
            width: 100%;
            height: 170px;
            // background-color: red;
            margin-top: 20px;
            #bottom-left {
              width: 50%;
              height: 100%;
              // background-color: blueviolet;
              float: left;
            }
            #bottom-right {
              width: 50%;
              height: 100%;
              // background-color: yellow;
              float: left;
            }
          }
        }
        .banner-left-center {
          width: 100%;
          height: 245px;
          background-color: #fff;
          border-radius: 5px;
          padding: 10px;
          .top {
            width: 100%;
            height: 30px;
            img {
              height: 100%;
            }
          }
          .bottom {
            width: 100%;
            height: 185px;
            // background-color: red;
            display: flex;
            justify-content: space-between;
            .ce {
              width: 25%;
              text-align: center;
              margin: auto;
              img {
                width: 70px;
                height: 70px;
                margin-bottom: 5px;
              }
            }
          }
        }
      }
      .banner-center {
        width: 40%;
        height: 100%;
        background-color: #fff;
        margin-right: 1%;
        float: left;
        border-radius: 5px;
        .top {
          width: 100%;
          height: 115px;
          padding-top: 35px;
          position: relative;
          .img {
            position: absolute;
            right: 16px;
            top: 49px;
            width: 15px;
            height: 15px;
          }
          ul {
            display: flex;
            justify-content: space-evenly;
            position: relative;
            li {
              text-align: center;
              div {
                width: 60px;
                // height: 30px;
                // background-color: red;
                margin: 0 0 10px 0;
                position: relative;
                text-align: center;
                span {
                  font-size: 20px;
                }
              }
              span {
                font-size: 12px;
              }
            }
            li:nth-child(3) {
              /*border: 1px dashed red;*/
              width: 86px;
              height: 94px;
              position: relative;
              top: -20px;
              background-image: url('./images/18@2x.png');
              background-repeat: no-repeat;
              background-size: 86px 80px;
              z-index: 10;
              div {
                position: relative;
                top: 18px;
                left: 12px;
                font-weight: 500;
                span {
                  transform: scale(1.7);
                  display: block;
                }
              }
              .li-s {
                position: relative;
                top: 19px;
              }
            }
          }
        }
        img {
          width: 100%;
          height: 77%;
          border-radius: 5px;
        }
      }
      .banner-right {
        width: 29%;
        height: 100%;
        // background: red;
        float: left;
        border-radius: 5px;
        .banner-right-top {
          width: 100%;
          height: 245px;
          background-color: #fff;
          margin-bottom: 10px;
          border-radius: 5px;
          padding: 10px;
          .top {
            width: 100%;
            height: 30px;
            img {
              height: 100%;
            }
          }
          .bottom {
            margin-top: 8px;
            overflow: hidden;
            ul {
              li {
                width: 100%;
                height: 35px;
                background-color: #f8f8ff;
                line-height: 35px;
                font-size: 13px;
                border-radius: 5px;
                margin-top: 7px;
                &:hover {
                  cursor: pointer;
                }
                img {
                  width: 13px;
                  height: 13px;
                  margin: 0 10px 0 10px;
                }
                span {
                  float: right;
                  margin-right: 25px;
                }
              }
            }
          }
        }
        .banner-right-footer {
          width: 100%;
          height: 245px;
          background-color: #fff;
          border-radius: 5px;
          padding: 10px;
          .top {
            width: 100%;
            height: 30px;
            line-height: 30px;
            img {
              height: 100%;
            }
            span {
              color: rgb(104, 131, 165);
              float: right;
            }
          }
          .bottom {
            margin-top: 8px;
            overflow: hidden;
            ul {
              li {
                width: 100%;
                height: 35px;
                background-color: #f8f8ff;
                line-height: 35px;
                font-size: 13px;
                border-radius: 5px;
                margin-top: 7px;
                &:hover {
                  cursor: pointer;
                }
                img {
                  width: 72px;
                  height: 22px;
                  margin: 0 10px 0 10px;
                }
                .label {
                  background-color: rgb(167, 150, 211);
                  padding: 3px;
                  margin: 0 10px 0 0;
                  border-radius: 5px;
                  color: #fff;
                  margin-right: 20px;
                }
                .time {
                  float: right;
                  margin-right: 25px;
                }
              }
              li:nth-child(2) {
                .label {
                  background-color: rgb(206, 155, 149);
                }
              }
              li:nth-child(3) {
                .label {
                  background-color: rgb(102, 183, 198);
                }
              }
              li:nth-child(4) {
                .label {
                  background-color: rgb(102, 183, 198);
                }
              }
            }
          }
        }
      }
    }
    // 内容
    .content {
      width: 100%;
      height: 280px;
      background-color: #fff;
      border-radius: 5px;
      margin-top: 10px;
      padding: 10px;
      .content-top {
        width: 100%;
        height: 30px;
        img {
          height: 100%;
        }
      }
      .content-bottom {
        width: 90%;
        // background-color: aqua;
        margin: 0 auto;
        margin-top: 15px;
        ul {
          width: 100%;
          height: 192px;
          display: flex;
          justify-content: space-around;
          li {
            width: 148px;
            border-radius: 10px;
            text-align: center;
            color: #636375;
            font-size: 14px;
          }
          li:nth-child(1) {
            border: 1px solid #e5d9c7;
            background: linear-gradient(#fffef9, #fffbf5);
            position: relative;
            line-height: 275px;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
          }
          li:nth-child(2) {
            border: 1px solid #ced9ea;
            background: linear-gradient(#fafcff, #f5f9ff);
            position: relative;
            line-height: 275px;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
          }
          li:nth-child(3) {
            border: 1px solid #d1d1f1;
            background: linear-gradient(#f9f9ff, #f7f7ff);
            position: relative;
            line-height: 275px;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
          }
          li:nth-child(4) {
            border: 1px solid #e5d9c7;
            background: linear-gradient(#fffef9, #fffbf5);
            position: relative;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
            div {
              position: relative;
              top: 130px;
              p {
                margin-bottom: 3px;
              }
            }
          }
          li:nth-child(5) {
            border: 1px solid #badbe6;
            background: linear-gradient(#fbfeff, #f5fdff);
            position: relative;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
            div {
              position: relative;
              top: 130px;
              p {
                margin-bottom: 3px;
              }
            }
          }
          li:nth-child(6) {
            border: 1px solid #ced9ea;
            background: linear-gradient(#fafcff, #f5f9ff);
            position: relative;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
            div {
              position: relative;
              top: 130px;
              p {
                margin-bottom: 3px;
              }
            }
          }
          li:nth-child(7) {
            border: 1px solid #e5d9c7;
            background: linear-gradient(#fffef9, #fffbf5);
            position: relative;
            line-height: 275px;
            img {
              width: 50px;
              height: 50px;
              display: block;
              position: absolute;
              left: 30%;
              top: 28%;
            }
          }
        }
      }
    }

    // 底栏
    .footer {
      width: 100%;
      height: 60px;
      margin-top: 10px;
      font-size: 18px;
      color: darkgray;
      text-align: center;
      line-height: 60px;
    }
  }
}
</style>
